<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		.title{
			color:green;
			font-size: 38px;
		}
	</style>
</head>
<body>
	<div id="root">我是一只小小小小鸟，怎么飞也飞不高！</div>
</body>
<script>
	// 在HTML结构当中的内置的一属性是可以直接操作的。
	const root = document.querySelector("#root");
	{
		// 1- style:可以直接在HTML的结构中进行体现
		// root.style.color = "red";
		// root.style.fontSize = "38px";
		
		// 2- 不可以
		// let style = {
		// 	color:"red",
		// 	fontSize:"38px"
		// };
		// root.style = style;
		
		// 3- 遍历
		// let style = {
		// 	color:"red",
		// 	fontSize:"38px"
		// };
		// for(let key in style){
		// 	root.style[key] = style[key];
		// }
		
		// 4-
		// let style = {
		// 	color:"red",
		// 	fontSize:"38px"
		// };
		// Object.assign(root.style,style);
	}
	{
		// 2- class
		// root.className = "title";// jsx---->className
	}
	{
		// 3- 通过点的形式直接增加,不会在HTML结构中进行体现，在内存中可以使用。
		// root.index = 1;
		// root.username = "zhangsan";
		// delete root.index;
		// delete root.username;
		// console.log(root.index,root.username);// 获取
		
	}
	{
		// 4- 以下方法可以在HTML结构中得以体现。
		root.setAttribute("index",1);
		root.setAttribute("username","zhangsan");
		// 删除
		root.removeAttribute("index");
		root.removeAttribute("username");
		// 获取
		console.log(root.getAttribute("index"));
		console.log(root.getAttribute("username"));
	}
</script>
</html>